<template>
  <div class="dashboard-demo">
    <div class="demo-header">
      <el-card>
        <div class="header-content">
          <div class="header-text">
            <h2>仪表盘演示 - 数据驱动的图表</h2>
            <p>展示从后端API获取数据并实时更新的图表功能</p>
          </div>
          <div class="demo-controls">
            <el-button type="primary" @click="loadMockData" :loading="loading">
              加载模拟数据
            </el-button>
            <el-button @click="clearData">
              清空数据
            </el-button>
            <el-button @click="refreshAllData" :loading="loading">
              刷新所有数据
            </el-button>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid" v-loading="loading">
      <el-card v-for="stat in statsData" :key="stat.title" class="stat-card">
        <div class="stat-content">
          <div class="stat-icon" :style="{ backgroundColor: stat.color }">
            <el-icon :size="24">
              <component :is="stat.icon" />
            </el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-title">{{ stat.title }}</div>
            <div class="stat-change" :class="stat.changeType">
              {{ stat.change }}
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-grid">
      <el-card class="chart-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="title">学生就业状态分布</span>
            <div class="chart-actions">
              <el-button type="text" @click="updateEmploymentData" size="small">
                随机更新
              </el-button>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="employmentChartOption" style="height: 300px;" />
        </div>
      </el-card>

      <el-card class="chart-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="title">月度趋势统计</span>
            <div class="chart-actions">
              <el-button type="text" @click="updateTrendData" size="small">
                随机更新
              </el-button>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="trendChartOption" style="height: 300px;" />
        </div>
      </el-card>

      <el-card class="chart-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="title">简历状态分布</span>
            <div class="chart-actions">
              <el-button type="text" @click="updateResumeData" size="small">
                随机更新
              </el-button>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="resumeChartOption" style="height: 300px;" />
        </div>
      </el-card>

      <el-card class="chart-card" v-loading="loading">
        <template #header>
          <div class="card-header">
            <span class="title">岗位申请统计</span>
            <div class="chart-actions">
              <el-button type="text" @click="updateJobData" size="small">
                随机更新
              </el-button>
            </div>
          </div>
        </template>
        <div class="chart-container">
          <v-chart :option="jobChartOption" style="height: 300px;" />
        </div>
      </el-card>
    </div>

    <!-- 数据状态展示 -->
    <div class="data-status">
      <el-card>
        <template #header>
          <span class="title">数据状态</span>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="最后更新时间">
            {{ lastUpdateTime }}
          </el-descriptions-item>
          <el-descriptions-item label="数据来源">
            模拟API数据
          </el-descriptions-item>
          <el-descriptions-item label="更新频率">
            手动刷新
          </el-descriptions-item>
          <el-descriptions-item label="图表数量">
            4个
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { ElMessage } from 'element-plus'
import { formatDate } from '@/utils'

// 注册ECharts组件
use([
  CanvasRenderer,
  PieChart,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const loading = ref(false)
const lastUpdateTime = ref('')

// 模拟数据
const dashboardData = ref({
  totalStudents: 1234,
  totalResumes: 567,
  totalInterviews: 89,
  totalJobs: 45
})

const employmentData = ref({
  employed: 335,
  unemployed: 310,
  furtherStudy: 234,
  selfEmployed: 135,
  military: 48
})

const trendData = ref([
  { month: '1月', interviews: 120, applications: 200 },
  { month: '2月', interviews: 132, applications: 180 },
  { month: '3月', interviews: 101, applications: 220 },
  { month: '4月', interviews: 134, applications: 190 },
  { month: '5月', interviews: 90, applications: 250 },
  { month: '6月', interviews: 230, applications: 300 }
])

const resumeData = ref({
  draft: 45,
  inProgress: 67,
  submitted: 89,
  approved: 123,
  rejected: 23
})

const jobData = ref({
  pending: 45,
  approved: 67,
  rejected: 23,
  total: 135
})

// 统计卡片数据
const statsData = computed(() => [
  {
    title: '学生总数',
    value: dashboardData.value.totalStudents.toLocaleString(),
    icon: 'User',
    color: '#409eff',
    change: '+12.5%',
    changeType: 'positive'
  },
  {
    title: '简历总数',
    value: dashboardData.value.totalResumes.toLocaleString(),
    icon: 'Document',
    color: '#67c23a',
    change: '+8.3%',
    changeType: 'positive'
  },
  {
    title: '面试总数',
    value: dashboardData.value.totalInterviews.toLocaleString(),
    icon: 'ChatDotRound',
    color: '#e6a23c',
    change: '-2.1%',
    changeType: 'negative'
  },
  {
    title: '岗位总数',
    value: dashboardData.value.totalJobs.toLocaleString(),
    icon: 'Briefcase',
    color: '#f56c6c',
    change: '+15.7%',
    changeType: 'positive'
  }
])

// 图表配置
const employmentChartOption = computed(() => ({
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '就业状态',
      type: 'pie',
      radius: '50%',
      data: [
        { value: employmentData.value.employed, name: '已就业' },
        { value: employmentData.value.unemployed, name: '未就业' },
        { value: employmentData.value.furtherStudy, name: '继续深造' },
        { value: employmentData.value.selfEmployed, name: '自主创业' },
        { value: employmentData.value.military, name: '参军入伍' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}))

const trendChartOption = computed(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['面试数量', '申请数量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: trendData.value.map(item => item.month)
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '面试数量',
      type: 'line',
      smooth: true,
      data: trendData.value.map(item => item.interviews),
      itemStyle: { color: '#409eff' }
    },
    {
      name: '申请数量',
      type: 'line',
      smooth: true,
      data: trendData.value.map(item => item.applications),
      itemStyle: { color: '#67c23a' }
    }
  ]
}))

const resumeChartOption = computed(() => ({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '简历状态',
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: resumeData.value.draft, name: '草稿' },
        { value: resumeData.value.inProgress, name: '进行中' },
        { value: resumeData.value.submitted, name: '已提交' },
        { value: resumeData.value.approved, name: '已通过' },
        { value: resumeData.value.rejected, name: '已拒绝' }
      ]
    }
  ]
}))

const jobChartOption = computed(() => ({
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['待审核', '已通过', '已拒绝', '总申请']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '申请数量',
      type: 'bar',
      data: [
        { value: jobData.value.pending, itemStyle: { color: '#e6a23c' } },
        { value: jobData.value.approved, itemStyle: { color: '#67c23a' } },
        { value: jobData.value.rejected, itemStyle: { color: '#f56c6c' } },
        { value: jobData.value.total, itemStyle: { color: '#409eff' } }
      ]
    }
  ]
}))

// 方法
const loadMockData = async () => {
  loading.value = true
  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    // 生成随机数据
    dashboardData.value = {
      totalStudents: Math.floor(Math.random() * 2000) + 1000,
      totalResumes: Math.floor(Math.random() * 800) + 400,
      totalInterviews: Math.floor(Math.random() * 200) + 50,
      totalJobs: Math.floor(Math.random() * 100) + 30
    }
    
    updateAllChartData()
    lastUpdateTime.value = formatDate(new Date())
    ElMessage.success('模拟数据加载成功')
  } catch (error) {
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}

const updateAllChartData = () => {
  updateEmploymentData()
  updateTrendData()
  updateResumeData()
  updateJobData()
}

const updateEmploymentData = () => {
  employmentData.value = {
    employed: Math.floor(Math.random() * 400) + 200,
    unemployed: Math.floor(Math.random() * 300) + 150,
    furtherStudy: Math.floor(Math.random() * 250) + 100,
    selfEmployed: Math.floor(Math.random() * 150) + 50,
    military: Math.floor(Math.random() * 80) + 20
  }
}

const updateTrendData = () => {
  trendData.value = trendData.value.map(item => ({
    ...item,
    interviews: Math.floor(Math.random() * 200) + 50,
    applications: Math.floor(Math.random() * 300) + 100
  }))
}

const updateResumeData = () => {
  resumeData.value = {
    draft: Math.floor(Math.random() * 80) + 20,
    inProgress: Math.floor(Math.random() * 100) + 30,
    submitted: Math.floor(Math.random() * 120) + 40,
    approved: Math.floor(Math.random() * 150) + 60,
    rejected: Math.floor(Math.random() * 50) + 10
  }
}

const updateJobData = () => {
  const pending = Math.floor(Math.random() * 80) + 20
  const approved = Math.floor(Math.random() * 100) + 30
  const rejected = Math.floor(Math.random() * 50) + 10
  
  jobData.value = {
    pending,
    approved,
    rejected,
    total: pending + approved + rejected
  }
}

const clearData = () => {
  dashboardData.value = {
    totalStudents: 0,
    totalResumes: 0,
    totalInterviews: 0,
    totalJobs: 0
  }
  
  employmentData.value = {
    employed: 0,
    unemployed: 0,
    furtherStudy: 0,
    selfEmployed: 0,
    military: 0
  }
  
  resumeData.value = {
    draft: 0,
    inProgress: 0,
    submitted: 0,
    approved: 0,
    rejected: 0
  }
  
  jobData.value = {
    pending: 0,
    approved: 0,
    rejected: 0,
    total: 0
  }
  
  lastUpdateTime.value = ''
  ElMessage.info('数据已清空')
}

const refreshAllData = () => {
  loadMockData()
}

onMounted(() => {
  loadMockData()
})
</script>

<style lang="scss" scoped>
.dashboard-demo {
  .demo-header {
    margin-bottom: 24px;
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-text {
        h2 {
          margin: 0 0 8px 0;
          color: var(--text-color-primary);
          font-weight: 600;
        }
        
        p {
          margin: 0;
          color: var(--text-color-secondary);
        }
      }
      
      .demo-controls {
        display: flex;
        gap: 12px;
      }
    }
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    
    .stat-card {
      .stat-content {
        display: flex;
        align-items: center;
        
        .stat-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
          margin-right: 16px;
        }
        
        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: var(--text-color-primary);
            line-height: 1;
            margin-bottom: 4px;
          }
          
          .stat-title {
            font-size: 14px;
            color: var(--text-color-secondary);
            margin-bottom: 4px;
          }
          
          .stat-change {
            font-size: 12px;
            font-weight: 500;
            
            &.positive {
              color: #67c23a;
            }
            
            &.negative {
              color: #f56c6c;
            }
          }
        }
      }
    }
  }
  
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    
    .chart-card {
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .title {
          font-weight: 600;
          color: var(--text-color-primary);
        }
      }
      
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .data-status {
    .title {
      font-weight: 600;
      color: var(--text-color-primary);
    }
  }
}

@media (max-width: 768px) {
  .dashboard-demo {
    .demo-header {
      .header-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
    }
    
    .stats-grid {
      grid-template-columns: 1fr;
    }
    
    .charts-grid {
      grid-template-columns: 1fr;
    }
  }
}
</style>
